<template>
    <div id="detail">
      <detail-nav-bar class="detail-item" @titleclick="titleclick"  ref="nav"></detail-nav-bar>
      <div class="wrapper" ref="wrappers">
       <div class="content">
      <detail-swiper  @swiperItem="swiperItem" :top-images="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
      <detail-param-info ref="re" :param-info="paramInfo"></detail-param-info>
      <detail-comment-info ref="san" :comment-info="commentInfo"></detail-comment-info>
      <goods-list ref="si" :goods="goodsitem"></goods-list>
      </div>
       </div>
       <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
       <back-top @click.native="backClick" v-show="isShow"></back-top>
       <tiao class="qing" :message="message" :show="show"> </tiao>
    </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'


import BackTop from 'components/content/backTop/BackTop'
import GoodsList from 'components/content/goods1/GoodsList'
import Tiao from 'components/common/tiao/Tiao'


import {getDetail ,Goods,Shop,GoodsParam,getRecommend} from 'network/detail'
import BScroll from 'better-scroll'



export default {
    name:'Detail',
    components:{
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailParamInfo,
        DetailCommentInfo,
        DetailBottomBar,
        GoodsList,
        BackTop,
        Tiao
      
        
 
    },
    data(){
        return{
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{},
            goodsitem:[],
            tabclickindex:{yi:0,re:0,san:0,si:0},
            shu:0,
            isShow:false,
            message:'',
            show:false
           
           
        }
    },
    created(){
        
        //1.保存传入的iid
        this.iid=this.$route.params.iid
        getDetail(this.iid).then(res=>{
          
            const data=res.result
            this.topImages=data.itemInfo.topImages
            //获取商品信息
            this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            //创建店铺信息的对象
            this.shop=new Shop(data.shopInfo)
            //保存商品的详情数据
            this.detailInfo=data.detailInfo;
            //获取参数信息
            this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
            //获取评论的信息
            if(data.rate.cRate!==0){
                this.commentInfo=data.rate.list[0]
            }
        }) 
        //请求推荐信息
        getRecommend().then(res=>{
           this.goodsitem=res.data.list
           
          
        })
    },
    mounted(){
         //创建bscroll对象
         this.backtop=new BScroll(this.$refs.wrappers,{
         //在scroll里需要点击click：true
        click:true,
        //开启监听滚动事件
        probeType:3,
                  
                   } )     
        this.backtop.on('scroll',(position)=>{
            //判断是否显示与隐藏
                if(position.y<-1000){
                           this.isShow=true
                       }else if(position.y>-1000){
                           this.isShow=false
                       }
                   if(position.y<=-this.tabclickindex.yi&&position.y>-this.tabclickindex.re) {
                    this.shu=0
                     this.$refs.nav.currentIndex=this.shu
                   }else if(position.y<=-this.tabclickindex.re&&position.y>-this.tabclickindex.san){
                       this.shu=1
                        this.$refs.nav.currentIndex=this.shu
                   }else if(position.y<=-this.tabclickindex.san&&position.y>-this.tabclickindex.si){
                       this.shu=2
                        this.$refs.nav.currentIndex=this.shu
                       
                   }else if(position.y<=-this.tabclickindex.si){
                       this.shu=3
                        this.$refs.nav.currentIndex=this.shu
                   }
                   })
                  
            
    },
    methods:{
        //监听加入购物车点击
        addToCart(){
        //获取购物车需要展示的信息
        const produce={}
        produce.image=this.topImages[0];
        produce.title=this.goods.title;
        produce.desc=this.goods.desc;
        produce.price=this.goods.realPrice;
        produce.iid=this.iid
        produce.xuanz=false
        //将商品添加到购物车里
        // this.$store.commit('addCart',produce)
        this.$store.dispatch('addCart',produce).then(res=>{
            //添加商品显示与隐藏
            this.show=true
            this.message=res
            setTimeout(()=>{
                this.show=false
            },1500)
        })
        },
        //点击返回顶部
        backClick(){
            this.backtop.scrollTo(0,0,500)
              
        },
        
        //获取tab键
        titleclick(index){
           switch(index){
                case 0:
                this.backtop.scrollTo(0,0,500)
                break
                case 1:
                this.backtop.scrollTo(0,-this.tabclickindex.re,500)
                break
                case 2:
               this.backtop.scrollTo(0,-this.tabclickindex.san,500)
                break
                case 3:
               this.backtop.scrollTo(0,-this.tabclickindex.si,500)
                break
            }
            
        },
        //监听图片是否加载完成
        swiperItem(){
        //更新高度
        this.backtop.refresh()
        },
        imageLoad(){
        this.backtop.refresh()
         //获取确定位置
        this.tabclickindex.re=this.$refs.re.$el.offsetTop;
        this.tabclickindex.san=this.$refs.san.$el.offsetTop;
        this.tabclickindex.si=this.$refs.si.$el.offsetTop;
       
        
        }

    }
}
</script>

<style scoped>
#detail{
    position: relative;
    z-index: 9999;
    background-color: #fff;
}
.detail-item{
    position: sticky;
    z-index: 99999;
    background-color: #fff;
}
.wrapper{
  
   height: 100vh;
   
}
.content{

 padding-bottom: -93px;
 
}
.qing{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
</style>